<template>
  <div class="main-center">
    <!-- <div class="main-top">
      <div class="main-top-item">
        <div class="grid-content bg-purple main-center-top">
          <div class="main-center-top-item">
            <div class="center-top-item-con">
              <div class="center-top-item-Img">
                <img src="@/assets/config_images/wx.png" alt />
              </div>
              <div class="center-top-item-right">
                <span class="center-top-item-right-name">名称</span>
                <span>代理商 到期时间：2019-05-10</span>
                <span>订单定制数</span>
              </div>
            </div>
            <div class="main-top-item-right">
              <span style="color:#1E8DF7;">
                <svg-icon icon-class="userinfo" />个人信息
              </span>
              <span style="color:#1E8DF7;">
                <svg-icon icon-class="wuliao" />申请物科
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="main-top-item" style="margin-top: -4px">
        <div class="grid-content bg-purple main-center-money">
          <div class="main-center-money-item">
            <p>
              我的提货款:
              <span style="font-size:18px">5</span>
            </p>
            <p>
              <span>充值</span>
              <span>充值明细</span>
            </p>
          </div>
          <div class="main-center-money-item">
            <p>
              我的收益:
              <span style="font-size:18px">￥500</span>
            </p>
            <p>
              <span>提现</span>
              <span>收益明细</span>
            </p>
          </div>
        </div>
      </div>
      <div class="main-top-item">
        <div class="grid-content bg-purple main-center-linkcon">
          <div class="main-center-linkcon-top">
            <p>
              <svg-icon icon-class="pc" />PC推广链接
            </p>
            <p>
              <svg-icon icon-class="phone" />手机推广链接
            </p>
            <p>
              <svg-icon icon-class="ercodes" />
            </p>
          </div>
          <div class="main-center-linkcon-bot">
            <input type="text" value="www.58zltc.com" />
            <p>复制</p>
            <p>预览</p>
          </div>
        </div>
      </div>
    </div> -->
    <div class="model-fun">
      <p class="mypro">
        <i class="el-icon-s-marketing"></i>
        <svg-icon icon-class="产品"></svg-icon>
        <span style="margin-left:10px;">我的产品</span>
      </p>
      <div class="model-fun-all">
        <div
          class="model-fun-all-item"
          v-for="(item,idx) in mypro"
          :key="idx"
          style="margin-top:10px"
        >
          <span class="mypro-name">{{item.text}}</span>
          <router-link :to="item.link">
            <div class="model-fun-item">
              <div class="model-fun-item-left">
                <img :src="item.img" alt />
              </div>
              <div class="model-fun-item-right">
                <span>进入管理</span>
                <span>当前版本：{{item.version}}</span>
                <span>
                  升级
                  <svg-icon icon-class="shengji" />
                </span>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- <div class="model-fun">
      <p class="mypro" @click="showImg = true">
        <i class="el-icon-s-marketing"></i>
        <svg-icon icon-class="xin"></svg-icon>
        <span style="margin-left:10px">其他产品</span>
      </p>
      <div class="model-fun-all">
        <div
          class="model-fun-all-item"
          v-for="(item,idx) in otherpro"
          :key="idx"
          style="margin-top:10px"
        >
          <span class="mypro-name">{{item.text}}</span>
          <div class="model-fun-item">
            <div class="model-fun-item-left">
              <img :src="item.img" alt />
            </div>
            <div class="model-fun-item-right">
              <span>开通产品</span>
              <span>{{item.content}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="model-fun">
      <p class="mypro">
        <i class="el-icon-s-marketing"></i>
        <svg-icon icon-class="jingxuan"></svg-icon>
        <span style="margin-left:10px;">精选服务</span>
      </p>
      <div class="model-fun-all">
        <div class="model-fun-all-item" v-for="(item,idx) in 3" :key="idx" style="margin-top:10px">
          <span class="mypro-name">小程序</span>
          <div class="model-fun-item" style="border-radius:0;heigth:80px">
            <div class="model-fun-item-left">
              <img src="../../../assets/config_images/xiaochengxu.png" alt />
            </div>
            <div class="model-fun-item-right">
              <span>服务名称</span>
              <span>服务简介</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-row :gutter="24" class="model-bot">
      <p class="mypro">
        <i class="el-icon-s-marketing"></i>
        <svg-icon icon-class="guangbo"></svg-icon>
        <span style="margin-left:10px;">站内广播</span>
      </p>
      <div class="model-bot-footer">
        <div class="model-footer-left">
          <span>2019-05-08</span>
          <p>[新闻]新闻内容新闻新 闻内容</p>
        </div>
        <div class="model-footer-right">
          <div class="model-footer-right-top">
            <p>全部公告</p>
            <p>产品更新</p>
            <p>新闻通知</p>
          </div>
          <div class="model-footer-right-con">
            <div v-for="(item,idx) in 6" :key="idx">
              <span>新闻</span>
              <span>内容内容内容内容</span>
              <span>05-35</span>
            </div>
          </div>
        </div>
      </div>
    </el-row> -->
    <!--客服-->
    <div class="service">
      <transition name="el-fade-in-linear">
        <div class="service-logo" v-show="showCon">
          <p style="color:#A2A2A2">套餐查询，操作答疑等</p>
          <p class="service-btn">在线客服</p>
          <p style="font-size:14px">客服热线</p>
          <p style="font-size:14px">125-5454-41545</p>
        </div>
      </transition>
      <div class="service-btncon" @click="showCon = !showCon">
        <img src="@/assets/config_images/service.png" alt />
      </div>
    </div>
  </div>
</template>
<script>
import { getApplySort } from "@/api/system";
export default {
  data() {
    return {
      showCon: false,
      showImg: true,
      mypro: [],
      otherpro: [
        {
          text: "短信平台",
          img: require("../../../assets/config_images/xiaochengxu.png"),
          content: "产品简介"
        },
        {
          text: "域名管理",
          img: require("../../../assets/config_images/www.png"),
          content: "产品简介"
        },
        {
          text: "企业邮箱",
          img: require("../../../assets/config_images/email.png"),
          content: "产品简介"
        }
      ],
      goodserves: [
        {
          text: "短信平台",
          img: require("../../../assets/config_images/xiaochengxu.png"),
          content: "产品简介"
        },
        {
          text: "域名管理",
          img: require("../../../assets/config_images/www.png"),
          content: "产品简介"
        },
        {
          text: "企业邮箱",
          img: require("../../../assets/config_images/email.png"),
          content: "产品简介"
        }
      ]
    };
  },
  mounted() {
    this.getSort();
  },
  methods: {
    alertImg() {},
    closeModel() {
      this.showImg = false;
    },
    // 获取应用种类
    getSort() {
      getApplySort().then(result => {
        if (result.code === 200) {
          const arr = [];
          for (const i in result.data) {
            const obj = {};
            obj.text = result.data[i].name;
            obj.img = require("../../../assets/config_images/www.png");
            obj.versions = "体验版";
            obj.link = `/prolist?type=${result.data[i].id}`;
            arr.push(obj);
          }
          console.log(arr);
          this.mypro = arr;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$topheight: 120px;
$funheight: 80px;
$bg: rgba(255, 255, 255, 1);
.main-center {
  width: 88%;
  min-width: 1280px;
  height: auto;
  margin: 0 auto;
  .main-top {
    width: 100%;
    height: 140px;
    display: flex;
    .main-top-item {
      flex: 1;
      .main-center-top {
        width: 100%;
        display: flex;
        align-items: center;
        background-image: url(../../../assets/config_images/Bolang.png);
        background-size: cover;
        background-position: left 0 top 136px;
        .main-center-top-item {
          width: 94%;
          height: 134px;
          margin: 0 auto;
          padding: 20px;
          display: flex;
          justify-content: space-between;
          .center-top-item-con {
            width: 86%;
            display: flex;
            border-right: 1px solid #caced1;
          }
          .center-top-item-right {
            width: auto;
            height: 90px;
            display: flex;
            flex-direction: column;
            margin-left: 18px;
            justify-content: space-between;
            .center-top-item-right-name {
              font-size: 26px;
              color: #353535;
            }
          }
        }
        .main-top-item-right {
          width: 26%;
          height: 100%;
          display: flex;
          flex-direction: column;
          margin-right: 28px;
          justify-content: space-between;
          margin-left: 18px;
        }
      }
      .main-center-money {
        width: 90%;
        height: 134px;
        display: flex;
        margin: 0 auto;
        padding: 20px;
        color: #333333;
        background-image: url(../../../assets/config_images/Bolang.png);
        background-size: cover;
        background-position: left 0px top 136px;
        .main-center-money-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          border-right: 1px solid #caced1;
          span {
            color: #1e8df7;
            font-weight: 400;
            cursor: pointer;
          }
        }
        .main-center-money-item:nth-child(2) {
          border: none;
        }
      }
      .main-center-linkcon {
        width: 90%;
        height: 134px;
        margin: 0 auto;
        display: flex;
        padding: 20px;
        flex-direction: column;
        justify-content: space-between;
        background-image: url(../../../assets/config_images/Bolang.png);
        background-size: cover;
        background-position: left 0px top 136px;
        .main-center-linkcon-top {
          width: 100%;
          color: #333333;
          display: flex;
          justify-content: space-between;
        }
        .main-center-linkcon-bot {
          width: 100%;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          input {
            width: 254px;
            height: 30px;
            color: #333333;
            background: rgba(255, 255, 255, 1);
            border-radius: 2px;
            border: 1px solid rgba(223, 223, 223, 1);
            padding-left: 10px;
          }
          p {
            width: 44px;
            height: 30px;
            color: #ffffff;
            background: rgba(30, 141, 247, 1);
            border-radius: 2px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            cursor: pointer;
          }
          p:nth-child(3) {
            background: #e1e1e1;
            color: #686868;
          }
        }
      }
    }
  }

  .service {
    width: 240px;
    height: 300px;
    position: fixed;
    top: 500px;
    right: 50px;
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
    .service-btn {
      width: 120px;
      height: 28px;
      line-height: 28px;
      color: #ffffff;
      font-size: 14px;
      border-radius: 14px;
      margin: 0 auto;
      background: rgba(121, 176, 255, 1);
      cursor: pointer;
    }
    .service-btncon {
      position: absolute;
      right: 0;
    }
  }
  .service-logo {
    width: 180px;
    height: 144px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    background-image: url(../../../assets/config_images/kefubg.png);
    background-size: cover;
  }
  .mypro {
    font-size: 20px;
    color: #353535;
    cursor: pointer;
  }
  .mypro-name {
    font-size: #353535;
    font-size: 16px;
    margin-left: 20px;
    margin-top: 10px;
  }
  .model-fun {
    width: 100%;
    height: auto;
    margin-top: 20px;
    padding: 6px 16px 0;
    display: flex;
    flex-direction: column;
    .model-fun-all {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      .model-fun-all-item {
        width: 300px;
        margin-left: 10px;
        margin-top: 10px;
        .model-fun-item {
          width: 100%;
          height: $funheight;
          border-radius: 53px;
          display: flex;
          align-items: center;
          padding: 23px;
          margin-top: 20px;
          background: $bg;
          box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.15);
          .model-fun-item-left {
            width: 44px;
            height: 44px;
            border-radius: 22px;
            overflow: hidden;
            color: #353535;
            font-weight: 560;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .model-fun-item-right {
            width: auto;
            height: 58px;
            display: flex;
            flex-direction: column;
            margin-left: 22px;
            justify-content: space-between;
            color: #353535;
            span:nth-child(2),
            span:nth-child(3) {
              color: #a2a2a2;
              font-size: 14px;
            }
          }
        }
      }
    }
    a {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
    }
  }
  .model-bot {
    width: 100%;
    height: auto;
    padding: 6px 30px 40px;
    border-radius: 3px;
    color: #353535;
    margin-bottom: 30px;
    .model-bot-footer {
      width: 100%;
      height: 200px;
      display: flex;
      border-radius: 3px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
      .model-footer-left {
        width: 200px;
        height: 100px;
        padding: 20px;
      }
      .model-footer-right {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .model-footer-right-top {
        display: flex;
        border-bottom: 1px solid #dfdfdf;
        p {
          margin-left: 30px;
        }
      }
      .model-footer-right-con {
        width: 100%;
        height: 300px;
        padding: 10px;
        float: left;
        margin-left: -30px;
        div {
          width: auto;
          height: 32px;
          line-height: 32px;
          color: #92a2b5;
          float: left;
          margin-left: 30px;
          span:nth-child(1) {
            color: #e9a939;
            border: 1px solid #e9a939;
            font-size: 12px;
            padding: 2px;
            border-radius: 3px;
          }
          span:nth-child(3) {
            margin-left: 20px;
          }
        }
      }
    }
  }
}
</style>

